<!DOCTYPE html>
<html>
<head></head>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap-select.css" rel="stylesheet">
<link rel="stylesheet" href="../css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="../css/bootstrap-treeview.min.css">
<link href="../css/bootstrap-table.css" rel="stylesheet">
<link href="../css/bootstrap-table-fixed-columns.css" rel="stylesheet">
<link href="../css/font-awesome.min.css" rel="stylesheet">
<link href="../css/JyyCommon.css" rel="stylesheet">
<link href="../css/JyyTable.css" rel="stylesheet">
<link href="../css/JyyTree.css" rel="stylesheet">
<link href="../css/JyyMsgBox.css" rel="stylesheet">
<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="../js/jquery.form.min.js"></script> 
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-paginator.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-treeview.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-select.js"></script>
<script type="text/javascript" src="../js/bootstrap-table.js"></script>
<script type="text/javascript" src="../js/bootstrap-table-fixed-columns.js"></script>
<script type="text/javascript" src="../js/jyy_modal.js"></script>
<script type="text/javascript" src="../js/JyyCommon.js"></script>
<script type="text/javascript" src="../js/JyyTable.js"></script>
<script type="text/javascript" src="../js/JyyTree.js"></script>
<script type="text/javascript" src="../js/JyyMsgBox.js"></script>
<script type="text/javascript" src="../js/JyyLoading.js"></script>
<script type="text/javascript" src="../js/echarts.js"></script>

<script type="text/javascript" src="../js/xm-select.js"></script>
<style type="text/css">
body, html{
	width: 100%;
	height: 100%;
}
.selBtn {
	float:left;
	margin-left:20px;
	height:30px;
	width:70px;
	background-color:#1890FF;
	border-radius:5px;
	border: 0px;
	color:white;
}
.bootstrap-select:not(.input-group-btn), .bootstrap-select[class*="col-"] {
	float: left;
}
.select{
	float:left;
	margin-left:20px;
	height:30px;
	width:70px;
	background-color:#1890FF;
	border-radius:5px;
	border: 0px;
	color:white;
}
 .show{
	box-shadow: 0 0.05rem 1rem rgba(0,0,0,0.15)!important;
	margin-left:24px;
} 

</style>
<body>
<div style="overflow-y: auto;overflow-x: hidden;width: 100%;height: 100%;">
       
	<div style="height: 50px;width: calc(100% - 20px);">
		<div class="col-md-12" style="padding-left: 5px;padding-right: 5px;margin-top: 10px;margin-left: 20px;">
			<label class="control-label col-sm-1" style="float: left;margin-top: 7px;padding: 0px;width: 40px;font-weight: normal;">年份</label>
			<select class="form-control selectpicker" title="请选择年份" data-width="100px" id="yearSel" style="float: left;margin-top: -3px;padding: 5px;width: 120px;font-weight: normal;"></select>
			<label class="control-label col-sm-1" style="float: left;margin-top: 7px;padding: 0px;width: 58px;font-weight: normal;margin-left:26px;">线路名称</label>
			<div  id="selectunit" style="float: left;margin-top: -7px;padding: 5px;width: 197px;font-weight: normal;"></div>
			<button class="selBtn" onclick="select()">查询</button>
		</div>
	</div>
	
	<div id="yearRenewable"  class= "show" style="width: calc(100% - 40px);min-height: 272px;position: relative;">
	 	<p style="margin-top: 10px;padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">线路容量统计</span>
		</p>
		<div id="echars" style="width:100%;height:297px;display:inline-block;margin-left:0px;"></div>
	</div>
	<div class= "show" style="width: calc(100% - 40px);min-height: 272px;position: relative;margin-top: 20px;margin-bottom: 20px;">
	 	<p style="margin-top: 10px;padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">线路利用小时数统计</span>
		</p>
		<div id="hoursEchars" style="width:100%;height:297px;display:inline-block;margin-left:0px;"></div>
	</div>
</div>
</body>
<script type="text/javascript">
var projectId=this.getQueryString('projectId');
$(function(){
	getyear();
})

function getyear(){
	$.ajax({
    	url : "../g/service/Sample/getLineYear",
    	 type:'post',
         contentType: 'application/json; charset=utf-8',
         data:JSON.stringify({"planid" : projectId }),
         success : function(data){
        	 var selectedId = "";
             $.each(data.iyear, function(i,val){ 
            	 $("#yearSel").append("<option value ='"+val+"'>"+val+"</option>");
            	 if(i==0) selectedId = val;
             });
             $('#yearSel').selectpicker('refresh');
             $('#yearSel').selectpicker('val',selectedId);
             getData();
         }
    })
}
function select(){
	var nodename=demo1.getValue();
    var year = document.getElementById("yearSel").value;
   	echars(nodename,year);
   	hoursEchars(nodename,year);
}
function  echars(nodename,year){
	$.ajax({
		url : "../g/service/Sample/getLineechars",
    	type:'post',
        contentType: 'application/json; charset=utf-8',
        data:JSON.stringify({"planid" : projectId ,"nodename": nodename , "yearid": year}),
        success : function(data){
        	let xData = [],yData = [];
       	  	for(item in data){
       			xData.push(item);
       		  	yData.push(data[item]);
       	  	}
	       	  
	       	var chartDom = document.getElementById('echars');
	       	var myChart = echarts.init(chartDom);
	       	var option = {
  				grid: {
	  			    left: '3%',
	  			    right: '3%',
	  			    bottom: '8%',
	  			    top: '12%',
	  			    containLabel: true
  			  	},
   				toolbox: {
   					show: true,
   					right: 30,
   					itemSize: 20,
   					itemGap: 12,
   				    feature: {
   				    	myTool: {
			        		show: true,
			        		title: "导出为Excel",
			        		icon: 'image://../images/excel.png',
			        		onclick: (o) => {
								var option = o.option;
								var dataSource = [];
								var dataType = "\uFEFF"; //解决乱码问题
								dataType += option.xAxis[0].name+",";  //添加表格的头
								if(option.series.length > 0) {
									for(var i = 0;i < option.series.length;i++) {
										dataType += option.series[i].name+","
									}
									dataType = dataType.substr(0, dataType.length-1)
								}
								dataType += '\n'; // 以上是导出的Excel文件头部

								for(var i = 0;i < option.xAxis[0].data.length;i++) {
									var arr = [];
									for(var j = 0;j < option.series.length+1;j++) {
										if(j == 0) {
											arr.push(option.xAxis[0].data[i]);
										} else {
											arr.push(option.series[j-1].data[i]);
										}
									}
									dataSource.push(arr);
								}
								// 从dataSource中取出数据存入数据源（dataType）
								dataSource.map(item => dataType += `${item.join(',')}\n`); 
								// 使用Blob，获得二进制实例
								const csvData = new Blob([dataType], {
								    type: 'text/csv'
								});
								// 创建a标签
								const _a = document.createElement('a');
								_a.href = URL.createObjectURL(csvData);
								_a.target = '_blank';
								_a.download = `线路容量统计.csv`;
								document.body.appendChild(_a);
								_a.click();
								document.body.removeChild(_a);
		                   	},
			        	},
			        	saveAsImage: {name:"线路容量统计",icon:"image://../images/downpic.png"}
   				    }
				},
	       	  	xAxis: {
		       	    type: 'category',
		       	    data: xData
	       	  	},
	       	  	yAxis: {
		       		name:'MW',
		       		axisLine: { show:false },
		       	    type: 'value',
		       	    data:  yData
	       	  	},
	       		tooltip: {
	    		    trigger: 'axis',
	    		    axisPointer: {
	    		    	type: 'none'
	    		    }
    		  	},
	       	  	series: [{
	       	      	data: yData,
	       	      	type: 'bar',
	       	    	name:"合计"
	       	    }]
	       	};

	       	option && myChart.setOption(option);
			window.addEventListener("resize", () => {
				if(myChart){
					myChart.resize()
				}
			})
		}
	})	 
}

function hoursEchars(nodename,year){
	$.ajax({
		url : "../g/service/Sample/getLineHoursEchars",
    	type:'post',
        contentType: 'application/json; charset=utf-8',
        data:JSON.stringify({"planid" : projectId ,"nodename": nodename , "yearid": year}),
        success : function(data){
	    	let xData = [],yData = [];
	    	for(item in data){
	       		xData.push(item);
	       		yData.push(data[item]);
	    	}
	       	  
	       	var chartDom = document.getElementById('hoursEchars');
	       	var myChart = echarts.init(chartDom);
	       	var option = {
  				grid: {
	  			    left: '3%',
	  			    right: '3%',
	  			    bottom: '8%',
	  			    top: '12%',
	  			    containLabel: true
  			  	},
   				toolbox: {
   					show: true,
   					right: 30,
   					itemSize: 20,
   					itemGap: 12,
   				    feature: {
   				    	myTool: {
			        		show: true,
			        		title: "导出为Excel",
			        		icon: 'image://../images/excel.png',
			        		onclick: (o) => {
								var option = o.option;
								var dataSource = [];
								var dataType = "\uFEFF"; //解决乱码问题
								dataType += option.xAxis[0].name+",";  //添加表格的头
								if(option.series.length > 0) {
									for(var i = 0;i < option.series.length;i++) {
										dataType += option.series[i].name+","
									}
									dataType = dataType.substr(0, dataType.length-1)
								}
								dataType += '\n'; // 以上是导出的Excel文件头部

								for(var i = 0;i < option.xAxis[0].data.length;i++) {
									var arr = [];
									for(var j = 0;j < option.series.length+1;j++) {
										if(j == 0) {
											arr.push(option.xAxis[0].data[i]);
										} else {
											arr.push(option.series[j-1].data[i]);
										}
									}
									dataSource.push(arr);
								}
								// 从dataSource中取出数据存入数据源（dataType）
								dataSource.map(item => dataType += `${item.join(',')}\n`); 
								// 使用Blob，获得二进制实例
								const csvData = new Blob([dataType], {
								    type: 'text/csv'
								});
								// 创建a标签
								const _a = document.createElement('a');
								_a.href = URL.createObjectURL(csvData);
								_a.target = '_blank';
								_a.download = `线路利用小时数统计.csv`;
								document.body.appendChild(_a);
								_a.click();
								document.body.removeChild(_a);
		                   	},
			        	},
			        	saveAsImage: {name:"线路利用小时数统计",icon:"image://../images/downpic.png"}
   				    }
				},
	       	  	xAxis: {
		       	    type: 'category',
		       	    data: xData
	       	  	},
	       	  	yAxis: {
		       		name:'h',
		       		axisLine: {
	        			show:false
	       			},
		       	    type: 'value',
		       	    data:  yData
	       	  	},
	       		tooltip: {
	    		    trigger: 'axis',
	    		    axisPointer: {
	    		      type: 'none'
	    		    }
    		  	},
	       	  	series: [{
	       	    	data: yData,
	       	      	type: 'bar',
	       	      	name:"合计"
	       		}]
	       	};

	       	option && myChart.setOption(option);
			window.addEventListener("resize", () => {
				if(myChart){
					myChart.resize()
				}
			})
		}
	})	 
}

function getData(){
	$.ajax({
    	url : "../g/service/Sample/getLinename",
    	type:'post',
        contentType: 'application/json; charset=utf-8',
        data:JSON.stringify({"planid" : projectId }),
        success : function(data){
        	var selectunit=$("#selectunit");
        	var dataList = [];
            $.each(data.iyear, function(i,val){
            	dataList.push({"name":val, "value":val})
            });
            demo1= xmSelect.render({
           		el:'#selectunit',
           		initValue:[data.iyear[0]],
           		filterable: true,
           		theme: {
           			color: '#409EFF',
           		},
           		toolbar: {
           	        show: true,
           	        list: ['ALL', 'CLEAR']
           	    },
           	    height:"200px",
           		language: 'zn',
           		data: dataList
           	})
            chushihua();
         }
    })	
}


function chushihua(){
	var nodename=demo1.getValue();
    var year = document.getElementById("yearSel").value;
    echars(nodename,year);
    hoursEchars(nodename,year);
}


function getQueryString (name){
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
	var r = window.location.search.substr(1).match(reg);
	return r ? unescape(r[2]) : null;
}

</script>
</html>